<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      /* 
      SPACING SYSTEM (px)
      2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

      FONT SIZE SYSTEM (px)
      10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
      
      color 
      general-color: #181818 
      #343a40
      contentbgcr:#fff3bf
      menubgcr:#ffe8cc
      */

      /* 格式化 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      html {
        font-size: 62.5%;
      }

      body {
        color: #181818;
        line-height: 1;
      }

      .container {
        margin: 15rem auto;
      }

      /****************************/
      /* 浮动工具栏部分 */
      /****************************/

      .menubar {
        width: 7rem;
        margin: 10rem auto;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.6rem;
      }

      .menu-item {
        padding: 0.5rem;
        background-color: #ffe8cc;
        border-radius: 8px;
        box-shadow: 0 0 9px rgba(0, 0, 0, 0.07);
      }

      .link:link,
      .link:visited {
        width: 5.5rem;
        height: 5.5rem;
        color: #61686e;
        text-decoration: none;
        border-radius: inherit;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;

        /* 实现动画过渡效果 */
        transition: all 0.3s;
      }

      .link:hover,
      .link:active {
        width: 6.5rem;
        height: 6.5rem;
        transform: scale(1.18);
        color: #440000;
      }

      .item-icons {
        width: 3.2rem;
      }

      .item-text {
        font-size: 1.2rem;
      }

      /****************************/
      /* 目录界面部分 */
      /****************************/

      .content {
        width: 70rem;
        height: 70rem;
        background-color: #faf9f4;
        display: flex;
        flex-direction: column;

        position: absolute;
        top: 0;
        left: 0;
        transform: translate(8%, 0);
        transition: all 0.5s ease-in;

        opacity: 0;
        pointer-events: none;
        visibility: hidden;
      }

      .content-open .content {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
      }

      .topbar-box {
        display: flex;
        flex-direction: column;
      }

      .content-topbar {
        position: relative;
        background-color: inherit;
        padding: 1.6rem 2.4rem;
        display: flex;
        align-items: flex-end;
        gap: 2.4rem;
      }

      .button {
        border: none;
        background: none;
        cursor: pointer;
        transition: all 0.3s;
      }

      .topbar-btn-list,
      .topbar-btn-bookmark {
        background-color: inherit;
        font-size: 3.2rem;
        margin-bottom: -0.4rem;
      }

      .topbar-status,
      .topbar-count {
        font-size: 1.2rem;
        color: #697076;
      }

      .topbar-links:link,
      .topbar-links:visited {
        color: #212529;
        font-size: 1.2rem;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
      }

      .topbar-links:hover,
      .topbar-links:active {
        color: #868e96;
      }

      .topbar-links--subscribe {
        margin-left: auto;
      }

      .topbar-icon {
        width: 1.6rem;
      }

      .closebtn-box {
        margin-top: 1.2rem;
        margin-right: 1.2rem;
        align-self: end;
      }

      .topbar-btn-close {
        padding: 0.4rem;
        border-radius: 50%;
        background-color: #96f2d7;

        display: flex;
        align-items: center;
        justify-content: center;
      }

      .topbar-btn-close:hover {
        transform: rotate(180deg);
        color: #e5353e;
      }

      .topbar-btn-icon {
        width: 2.4rem;
      }

      .content-main {
        background-color: inherit;
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
      }

      .main-item-free,
      .main-item-vip {
        padding: 0.8rem;
      }

      .main-item-bar {
        height: 5.2rem;
        padding: 1.2rem;
        background-color: #e6e5e1;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .main-item-text {
        font-size: 1.6rem;
      }

      .main-item-icon {
        width: 2.4rem;
      }

      .icon--ardown {
        display: none;
      }

      .section {
        display: none;
      }

      .hidden-box {
        padding: 1.6rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        row-gap: 2.4rem;
        column-gap: 2.4rem;
      }

      .hidden-box-links:link,
      .hidden-box-links:visited {
        padding-bottom: 0.8rem;
        border-bottom: 1px solid #e6e5e1;
        font-size: 1.6rem;
        color: #181818;
        text-decoration: none;
      }

      .hidden-box-links:hover,
      .hidden-box-links:active {
        color: #e5353e;
      }

      .open .section,
      .open .icon--ardown {
        display: block;
      }

      .open .icon--arup {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="content">
        <div class="topbar-box">
          <div class="closebtn-box">
            <button class="button topbar-btn-close">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="topbar-btn-icon"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M6 18 18 6M6 6l12 12"
                />
              </svg>
            </button>
          </div>

          <div class="content-topbar">
            <button class="button topbar-btn-list">目录</button>
            <span class="topbar-status">连载中</span>
            <span class="topbar-count">· 共66章</span>
            <button class="button topbar-btn-bookmark">书签</button>
            <a class="topbar-links topbar-links--subscribe" href="#">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="topbar-icon"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
                />
              </svg>
              <span>批量订阅</span>
            </a>
            <a class="topbar-links topbar-links--reverse" href="#">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="topbar-icon"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M3 7.5 7.5 3m0 0L12 7.5M7.5 3v13.5m13.5 0L16.5 21m0 0L12 16.5m4.5 4.5V7.5"
                />
              </svg>
              <span>倒序</span>
            </a>
          </div>
        </div>

        <div class="content-main">
          <div class="main-item-free">
            <div class="main-item-bar">
              <span class="main-item-text">正文卷</span>
              <button class="button main-item-btn-open free">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="main-item-icon icon--arup"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="m19.5 8.25-7.5 7.5-7.5-7.5"
                  />
                </svg>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="main-item-icon icon--ardown"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="m4.5 15.75 7.5-7.5 7.5 7.5"
                  />
                </svg>
              </button>
            </div>

            <div class="section">
              <div class="hidden-box">
                <a class="hidden-box-links" href="#">第1章 塔寺町</a>
                <a class="hidden-box-links" href="">第2章 开窜</a>
                <a class="hidden-box-links" href="">第3章 再也不会去吃了</a>
                <a class="hidden-box-links" href="">第4章 再相信塔寺町一次</a>
              </div>
            </div>
          </div>

          <div class="main-item-vip">
            <div class="main-item-bar">
              <span class="main-item-text">正文卷</span>
              <button class="button main-item-btn-open vip">
                <!-- 收起按钮 -->
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="main-item-icon icon--arup"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="m19.5 8.25-7.5 7.5-7.5-7.5"
                  />
                </svg>
                <!-- 展开按钮 -->
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="main-item-icon icon--ardown"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="m4.5 15.75 7.5-7.5 7.5 7.5"
                  />
                </svg>
              </button>
            </div>

            <div class="section">
              <div class="hidden-box">
                <a class="hidden-box-links" href="#">第1章 塔寺町</a>
                <a class="hidden-box-links" href="">第2章 开窜</a>
                <a class="hidden-box-links" href="">第3章 再也不会去吃了</a>
                <a class="hidden-box-links" href="">第4章 再相信塔寺町一次</a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="menubar">
        <div class="menu-item">
          <a href="#" class="link menu-list">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="item-icons"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
              />
            </svg>

            <span class="item-text">目录</span>
          </a>
        </div>

        <div class="menu-item">
          <a href="#" class="link">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="item-icons"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"
              />
            </svg>

            <span class="item-text">详情</span>
          </a>
        </div>

        <div class="menu-item">
          <a href="#" class="link"
            ><svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="item-icons"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"
              />
            </svg>

            <span class="item-text">收藏</span>
          </a>
        </div>

        <div class="menu-item">
          <a href="#" class="link">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="item-icons"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"
              />
            </svg>

            <span class="item-text">夜间</span>
          </a>
        </div>

        <div class="menu-item">
          <a href="#" class="link">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="item-icons"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75"
              />
            </svg>

            <span class="item-text">设置</span>
          </a>
        </div>
      </div>
    </div>
  </body>

  <script>
    const openBtn = document.querySelectorAll(".button");
    openBtn.forEach(function (button) {
      button.addEventListener("click", function () {
        if (button.classList.contains("free")) {
          accordion = document.querySelector(".main-item-free");
          accordion.classList.toggle("open");
        }

        if (button.classList.contains("vip")) {
          accordion = document.querySelector(".main-item-vip");
          accordion.classList.toggle("open");
        }
      });
    });

    const allLinks = document.querySelectorAll("a:link");
    const content = document.querySelector(".container");
    allLinks.forEach(function (link) {
      link.addEventListener("click", function (e) {
        if (link.classList.contains("menu-list"))
          content.classList.toggle("content-open");
      });
    });
    const closeBtn = document.querySelector(".topbar-btn-close");
    closeBtn.addEventListener("click", function () {
      content.classList.toggle("content-open");
    });
  </script>
</html>
